<template>
  <Card v-style="'boxstyle_bg_1'">
    <template #header>
      <div class="header">
        <img src="@/assets/webmasterData/icon8.png" alt="" />
        <span>搜索引擎站长次数</span>
      </div>
    </template>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="table">
            <div class="th">
              <p>
                <span style="width: 30%;">排名</span>
                <!-- <span>日期</span> -->
                <span>站长</span>
                <span>次数</span>
                <span>飞机</span>
                <span>邮箱</span>
              </p>
            </div>
            <div class="tb" v-for="(item,index) in list" :key="index">
              <p>
                <span v-title style="width: 30%;">{{item.id}}</span>
                <!-- <span v-title>2022-01-12</span> -->
                <span v-title style="color: #01CBFE;">{{item.title || '-'}}</span>
                <span style="color: #2BCDC4;" v-title>{{item.search_count || '-'}}</span>
                <span>{{item.aircraft || '-'}}</span>
                <span v-title>{{item.email || '-'}}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { ref, onMounted, toRefs, defineProps, watch } from "vue";
import Card from "@/components/Card";
import store from "@/store";

import Swiper from 'swiper';   // 引入库
import 'swiper/css/swiper.css'; // 引入样式文件，注意5和6版本的样式文件不一致

let titlePage = 1;
let titleTotalPage = 1;
let date = 'day';

import { bigDataApi } from "@/api/bigData";

const props = defineProps({
  selectdate:{
    type: String,
    default: 'day'
  }
})
const { selectdate } = toRefs(props);

console.log(props)


watch(
  selectdate,
  (e) => {
    // console.log(e)
    date = e;
    titlePage = 1;
    getSearchList();
  },
  {
    immediate: true,
  }
);

const list = ref([])
onMounted(() => {
  var mySwiper = new Swiper('.swiper-container', {
   on: {
      touchEnd: function (swiper) {
        console.log(swiper);
        if(titlePage >= titleTotalPage){
          titlePage = 1
        }else{
          titlePage ++;
        }
        list.value = []
        getSearchList();
      },
    }
  });
});

async function getSearchList(){
  //is_asc  0 降序， 1 升序
  //date  day 日，  week  周，  month 月 默认 day
  const result = await bigDataApi.search({is_asc: 1, date: date, page: titlePage, limit: 5, token: store.getters.user.token });
  const { data } = result;
  console.log(data)
  // 初始化图表
  if(data.last_page){
    titleTotalPage = data.last_page
  }
  list.value = data.data
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  img {
    width: 18px;
    height: 18px;
    margin-right: 10px;
  }
}
.table {
  height: 100%;
  display: flex;
  flex-direction: column;

  .th > p,
  .tb > p {
    padding: 15px 20px;
    font-size: 14px;

    display: flex;
    align-content: center;
    span {
      width: 50%;
      padding: 0 10px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .th {
    color: #cbd2d5;
    font-size: 16px;
  }
  .tb {
    flex: 1;
    overflow-y: auto;
  }
  .tb > p {
    background: #131313;
    border-radius: 5px;
    margin-bottom: 10px;
  }
}
</style>
